<template>
  <div class="app">
   <el-row :gutter="12" class="userInfo">
      <el-col :span="4">
         <el-card shadow="always" body-style="height:350px">
            <div class="aside">
             <el-menu active-text-color="#ffd04b">  
               <el-menu-item index="1">
                  <a href="#/user/profile" class="tag">我的资料</a>
               </el-menu-item>
               <el-menu-item index="2">
                  <a href="#/user/blog" class="tag">我的博客</a>
               </el-menu-item>
               <el-menu-item index="3">
                  <a href="#/user/follow" class="tag">我的关注</a>
               </el-menu-item>
               <el-menu-item index="4">
                  <a href="#/user/fans" class="tag">我的粉丝</a>
               </el-menu-item>
               <el-menu-item index="5">
                  <a href="#/user/chatroom" class="tag">在线聊天室</a>
               </el-menu-item>
             </el-menu>
            </div>
         </el-card>
      </el-col>
      <el-col :span="16">
         <el-card shadow="always" body-style="height:500px;">
             <div class="join"  v-if="select==true">
                <i class="el-icon-s-promotion"></i>
               <el-button type="text" @click="join">进入聊天室</el-button>
             </div>
             <div class="chatroom" v-else-if="select==false">
                 <div class="wechat">
                    <div class="title">
                       <div class="tfont">
                          <span style="font-weight:bold">在线聊天室</span>
                       </div>
                    </div>
                    <div class="local">
                     <div class="main">
                           <div id="messagebox">    
                              <!-- 接收内容渲染 -->
                              <p v-if="isclose==true">
                                 聊天已经断开
                              </p>

                           </div>
                           <div class="notice">
                              <!-- 通告栏 -->
                              <div style="float:left;">
                              <div class="gonggao">
                                 <h3>公告栏</h3>
                              </div>
                              <p>【公告】欢迎来到这个大家庭。
可自由聊天，但不能辱骂、发色情内容、敏感政治等。</p>
                              </div>
                           </div>
                           <div  id="group">
                              <!-- 在线用户渲染 -->
                              
                           </div>
                     </div>
                     <div class="send">
                        <div class="send-input">
                           <el-input
                           type="textarea"
                           placeholder="请输入内容"
                           v-model="textarea"
                           maxlength="120"
                           show-word-limit
                           :rows="3"
                           >
                           </el-input>
                           <div class="send-button">
                           <el-button-group>
                           <el-button type="small" @click="dialogQuit = true">关闭</el-button>
                           <el-button type="small" @click="send()">发送</el-button>

                           <el-dialog
                           title="提示"
                           :visible.sync="dialogQuit"
                           width="20%"
                           :before-close="handleClose">
                           <span>确定退出聊天室?</span>
                           <span slot="footer" class="dialog-footer">
                              <el-button @click="dialogQuit = false">取 消</el-button>
                              <el-button type="primary" @click="quit">确 定</el-button>
                           </span>
                           </el-dialog>
                           </el-button-group>
                           </div>
                        </div>
                     </div>
                    </div>
                 </div>
             </div>
         </el-card>    
      </el-col>
   </el-row>
  </div>
</template>

<script>
import {apiurl} from "../../service/api.js";
import usernavbar from '../../assets/navbar.png'

export default {
   created(){
   },
   data(){
      return{
         dialogQuit : false,
         select : true,
         chat : false,
         textarea: '',
         isclose: false,
         username: [],
      }
   },methods:{ 
       join() {
        this.$confirm('是否进入多人聊天室?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.select = false
          this.chat = true
          this.socket()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消进入聊天室'
          });          
        });
      },
      socket(){
            if (window["WebSocket"]) {
               var ws = new WebSocket("ws://127.0.0.1:5001/ws")
               this.username.push(ws)
               ws.onclose = function (evt) {
                  this.isclose = true
               }
               ws.onmessage = function (evt) { 
                  var userInfo = JSON.parse(evt.data)
                  var type = userInfo.Type
                  switch (type){
                     case 0:                 
                        // console.log(userInfo.User)
                        var p = document.createElement('p')
                        p.style.color = "#2E8B57"
                        p.innerText = userInfo.User+",进入了聊天室....."
                        document.getElementById("group").appendChild(p) 
                        break 
                     case 1:
                        // console.log(userInfo.User)
                        var p = document.createElement('p')
                        p.style.color = "#FF4500"
                        p.innerText = userInfo.User+",退出了聊天室....."
                        document.getElementById("group").appendChild(p)  
                        break
                     case 2:
                        var p = document.createElement('p')
                        p.style.fontSize = "20px"
                        p.style.color = "#000000"
                        p.innerText = userInfo.User+"    : "+userInfo.Content
                        document.getElementById("messagebox").appendChild(p) 
                        break
                  }
               }
               ws.onclose = function (evt){
                  ws.close()  
               }
            }else{
               alert("该浏览器不支持websocket")
            }     
      },
      send(){
         //发送消息
         var context = this.textarea
         var ws = this.username[0]
         ws.send(context)
         this.textarea=""
      },
      quit(){
         var ws = this.username[0]
         ws.close()
         this.dialogQuit = false
         location.reload() 
         that.$message.success(`已退出聊天室`)
      }
   } 
}
</script>



<style  scoped>
.app{
   position: relative;
   margin-top: 20px;
}
/*渐入动画*/
.userInfo
{
    padding-left : 15%;
    padding-top: 2%;
	position:relative;
	animation:mymove 1s forwards;
}

@keyframes mymove
{
	from {left:-1000px;}
	to {left:0px;}
}

.aside{
   height: 330px;
   /* width: 80%; */
}
.tag{
   height: 66px;
   font-size: 20px;
   color:rgb(0, 162, 255);
   text-decoration:none;
}


.join{
    padding-top: 30%;
    padding-left: 45%
}
.chatroom{
   padding-top: 10px;
   padding-left: 12%
}
.wechat{
   width: 600px;
   height: 480px;
   background: rgb(103, 162, 240,0.5);
   box-shadow: 10px 10px 5px #888;
   border:1px solid #666;
}
.title{
   width: 100%;
   height: 50px;
   background: rgb(13, 52, 224,0.5);
   border-bottom: 1px solid #666;
}
.tfont{
   color:#ffffff;
   padding-top: 15px;
   text-align: center;
}

.local{
   width: 100%;
   height: 430px;
}

.main{
   width: 100%;
   height: 320px;
}

#messagebox{
   overflow: scroll;
   overflow-x:hidden;
   width:70%;
   height: 320px;
   opacity:0.8;
   background: #ffffff;
   float: left;
}
.notice{
   background: url('../../assets/bg1.png');
   width:30%;
   height: 150px;
   float: right;
   top: 0;
   border-bottom: 1px solid #666;
}
#group{
   overflow: scroll;
   overflow-x:hidden;
   width:30%;
   height: 280px;
   float: right;
   top: 0;
}
.send{
   width:70%;
   height: 110px;

}
.send-button{
   float: right;
}

.gonggao{
   text-align: center;
   font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}

::-webkit-scrollbar-track-piece{ 
background-color:#f8f8f8;
}
::-webkit-scrollbar {
width:5px;
height:3px;
}
::-webkit-scrollbar-thumb {
background-color:gray;
background-clip:padding-box;
min-height:28px;
}
::-webkit-scrollbar-thumb:hover {
background-color:#bbb;
}

</style>